<template>
  <div class="realtime-monitoring">
    <Page title="实时监控" subtitle="实时监控资源使用状态和系统性能">
      <Card title="实时监控面板" :bordered="false">
        <div class="placeholder-content">
          <IconifyIcon icon="mdi:clock-outline" size="48" />
          <p>实时监控功能开发中...</p>
        </div>
      </Card>
    </Page>
  </div>
</template>

<script lang="ts" setup>
import { Card } from 'ant-design-vue';
import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
</script>

<style scoped>
.realtime-monitoring {
  padding: 20px;
}

.placeholder-content {
  padding: 60px 20px;
  color: #999;
  text-align: center;
}

.placeholder-content p {
  margin-top: 16px;
  font-size: 16px;
}
</style>
